<template>
  <view class="vision">
    <view class="container">
      <view class="box">
        <text></text>
        <text class="text">温馨提示:选项都是默认位“否”,存在该症状请点击“是”</text>
        <view class="scroll">
          <view class="question-container" v-for="(question, index) in state.questions" :key="index">
            <view v-if="question.imgUrl">
              <image
                :src="baseUrl + question.imgUrl"
                mode="scaleToFill"
                class="img"
              />
            </view> 
            <text class="question">{{ index+1 }}.{{'是否具有'+ question.content }}</text>
            <view class="border"></view>  
              <radio-group class="radio-group" @change="handleRadioChange(index, question,$event.target.value)">  
                <label class="radio-label" v-for="(option,index_option) in options" :key="option.value">  
                  <radio :value="option.value" :checked="index_option === current"/>
                  <text>{{ option.label}}</text>
                </label>  
              </radio-group>  
          </view>
          <view class="bottom_box"></view>
        </view>
      </view>
    </view>
    <view class="foot_box">
      <view class="foot-container">
        <text class="foot1" @tap="back">上一步</text>
        <text class="foot2">6/8</text>
        <text class="foot3" @tap="next">下一步</text>
      </view>
    </view>
</view>
</template>

<script setup lang="ts">
import {ref,reactive,computed} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {getFootListApi,postFootApi} from '@/apis/foot/foot'
import { useMarkStore } from '@/stores/modules/mark';
const useMark = useMarkStore()
const baseUrl = ref('http://47.108.70.211:9000')
/* const uuid = ref(0)
const uuid1 = ref(0)
const uuid2 = ref(0)
const current = ref(1)
const getUuid =async ()=>{
 const res = await wx.getRandomValues({length: 12 })
 uuid.value = wx.arrayBufferToBase64(res.randomValues)
 const res1 = await wx.getRandomValues({length: 12 })
 uuid1.value = wx.arrayBufferToBase64(res.randomValues)
 uuid2.value=uuid1.value+uuid.value
 console.log('uuid:',uuid2.value)
} */
const selected=[]
const options = reactive([
  {value:'yes',label:'是'},
  {value:'no',label:'否'},
])
const handleRadioChange = (index,question,targetValue)=>{//radio框的值改变触发回调函数
  if(targetValue==='yes')
  {
    selected[index].result=1
  }
  else{
    selected[index].result=0
  }
}
const setSelected = ()=>{
  for(let i=0;i<state.questions?.length;i++)
{
  selected.push({mark:useMark.mark,tsBaseFootId:state.questions[i]?.id,result:0})
}
console.log('我是seleted',selected) 
}
const back = ()=>{
 uni.navigateBack()
}
const next =async ()=>{//提交
  console.log(selected)
  const res = await postFootApi(selected)
  console.log(res.code)
  console.log(res.msg)
 uni.navigateTo({ url: '/pages/fallRiskList/components/underlyingDisease/underlyingDisease'})
}
const state = reactive({
  questions:[]
})
const getFootList =async ()=>{
  const res = await getFootListApi()
  state.questions = res.data
  console.log('数据',state.questions)
  if(res.code===200)
  {
    setSelected()
  }
  console.log('图片地址：',baseUrl+state.questions[0].imgUrl)
}
onLoad(()=>{
  getFootList()
})
</script>

<style lang="scss">
page {
 background-color: rgb(10,127,255);
}
.vision{
 height:100vh;
 position: relative;
 .container{
  height: 100vh;
  margin: 30rpx;
  background-color: #fff;
  border-radius: 15rpx;
 .box{
  border-radius: 20rpx;
   background-color: #fff;
  .scroll{
    margin-top: 15rpx;
    .img{
      height: 300rpx;
      width:100%;
    }
    .question-container {  
        font-size: 35rpx;
        margin-bottom: 40rpx;/* 每个问题之间的间距 */  
      .question {   
        margin-bottom: 40rpx; 
        margin-left: 50rpx;
      }  
    .border{
      height: 3rpx;
      width: 600rpx;
      background-color: #eee;
      margin-top: 20rpx;
      margin-left: 50rpx;
      margin-bottom: 15rpx;
    }
    .radio-group {   
      margin-left: 50rpx;
    .radio-label {   
      padding-top: 30rpx; 
      padding-right: 200rpx; 
    }  
    }
}
.bottom_box{
  height: 150rpx;
  background-color: #fff;
}
  }
   .text{
 font-size: 25rpx;
 color:red;
 margin-left: 50rpx;
 margin-top: 30rpx;
}
}
}
.foot_box{
    position:fixed;
    bottom: 2rpx;
    height: 100rpx;
    width: 100%;
    background-color: #fff;
    .foot-container{
      margin: 15rpx;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .foot1, .foot2, .foot3{
        font-size: 35rpx;
        color: black;
      }
      .foot2{
        text-align: center;
      }
    }
  }
}
</style>